<template>
  <div class="box">
    <el-form label-width="80px" :inline="true">
      <el-form-item label="订单号">
        <el-input v-model="seachInfo.orderNo"></el-input>
      </el-form-item>

      <el-form-item label="收货人">
        <el-input v-model="seachInfo.consignee"></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="seachInfo.phone"></el-input>
      </el-form-item>

      <el-form-item label="订单号">
        <el-select v-model="seachInfo.orderState">
          <el-option label="已受理" value="已受理">已受理</el-option>
          <el-option label="已完成" value="已完成">已完成</el-option>
          <el-option label="派送中" value="派送中">派送中</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择时间">
        <el-date-picker
          v-model="seachInfo.date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button @click="getList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="orderList">
      <el-table-column label="订单号" prop="orderNo"></el-table-column>
      <el-table-column label="下单时间">
        <template slot-scope="scope">
          {{ scope.row.orderTime | correctTime }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" prop="phone"></el-table-column>
      <el-table-column label="收货人" prop="consignee"></el-table-column>
      <!-- <el-table-column label="送货地址" prop="deliverAddress"></el-table-column> -->
      <el-table-column label="送达时间">
        <template slot-scope="scope">
          {{ scope.row.deliveryTime | correctTime }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="备注" prop="remarks"></el-table-column> -->
      <!-- <el-table-column label="订单金额" prop="orderAmount"></el-table-column>             -->
      <el-table-column label="订单状态" prop="orderState"></el-table-column>
      <el-table-column label="操作">
        <el-button>查看</el-button>
        <el-button>编辑</el-button>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getOrderListReq } from "@/api/order.api";
import { goodsClear } from "@/utils/common";
import dayjs from "dayjs";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pageInfo: {
        currentPage: 1,
        pageSize: 5,
      },
      seachInfo: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: "",
      },
      orderList: [],
      currentPage4:1,
      total:null
    };
  },

  methods: {
    async getList() {
      let params = { ...this.pageInfo, ...this.seachInfo };
      if (params.date) {
        params.date = JSON.stringify(
          params.date.map((item) => dayjs(item).format("YYYY-MM-DD HH:mm:ss"))
        );
      }
      goodsClear(params);
      let res = await getOrderListReq(params);
      console.log(res);
      this.total = res.data.total
      this.orderList = res.data.data;
      console.log(this.orderList);
    },
    handleSizeChange(val) {
    // this.pageinfo.currentPage = val
    console.log(val);
    //改变每页数量
    this.pageInfo.pageSize = val;
    //重新调用listGet
    this.getList();
  },

  handleCurrentChange(val) {
    // 改变页码
    this.pageInfo.currentPage = val;
    // 重新调用listGet
    this.getList();
  },
  },

  filters: {
    correctTime(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    },
  },

  

  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  padding: 10px 10px;
}
</style>